<template>
	<view class="info-page">
		<view class="course-info flex flex-direction align-center">
			<image class="scholl-logo" src="../../../static/school_logo.png" mode=""></image>
			<view class="course-name">{{ classInfo.add_time | filterTime }} {{ classInfo.title }}点名</view>
			<view class="teacher-name">任课老师：{{ classInfo.class_course_teacher.course_teacher_name }}</view>
			<button class="share-btn" @click="shareCurse" open-type="share">
				<text class="cuIcon-share"></text>
				分享到群
			</button>
		</view>
		
		<view class="list-box">
			<view class="list-title text-bold">
				已签到学生<text class="count-text">（{{ classInfo.sign_group.length }}人）</text>
			</view>
			<view class="student-list flex flex-wrap">
				<view class="student-item" v-for="(student, index) of classInfo.sign_group" :key="index">
					<image class="student-avatar" :src="student.student.user.avatar" mode="scaleToFill"></image>
					<view class="student-name">{{ student.student.student_name }}</view>
				</view>
			</view>
		</view>
		<view class="list-box">
			<view class="list-title text-bold">
				缺席学生<text class="count-text">（{{ classInfo.no_sign_group.length }}人）</text>
			</view>
			<view class="student-list flex flex-wrap">
				<view class="student-item" v-for="(student, index) of classInfo.no_sign_group" :key="index">
					<image class="student-avatar" :src="student.student.user.avatar" mode="scaleToFill"></image>
					<view class="student-name">{{ student.student.student_name }}</view>
				</view>
			</view>
		</view>
		<view class="list-box">
			<view class="list-title text-bold">
				请假学生<text class="count-text">（{{ classInfo.leave_group.length }}人）</text>
			</view>
			<view class="student-list flex flex-wrap">
				<view class="student-item" v-for="(student, index) of classInfo.leave_group" :key="index">
					<image class="student-avatar" :src="student.student.user.avatar" mode="scaleToFill"></image>
					<view class="student-name">{{ student.student.student_name }}</view>
				</view>
			</view>
		</view>
		
		<!-- 签到弹窗 -->
		<open-alert ref="checkedModal">
			<view class="modal-box flex flex-direction align-center">
				<!-- 可签到 -->
				<block v-if="checkedType == 0">
					<view class="box-circle can-checked flex flex-direction align-center justify-center" @click="checkedSite">
						<text class="hint">点击签到</text>
						<text class="time">8:30</text>
					</view>
					<view class="hint-text text-bold">
						您的位置可以签到
					</view>
				</block>
				<!-- 签到成功 -->
				<block v-else-if="checkedType == 1">
					<view class="box-circle checked-success flex flex-direction align-center justify-center">
						<text class="cuIcon-check text-bold"></text>
					</view>
					<view class="hint-text text-bold blue-text">
						签到成功!
					</view>
				</block>
				<!-- 签到失败 -->
				<block v-else>
					<view class="checked-fail flex flex-direction align-center justify-center">
						<text class="cuIcon-close text-bold"></text>
					</view>
					<view class="hint-text text-bold red-text">
						签到失败!
					</view>
					<view class="sub-hint">
						<!-- <text class="cuIcon-infofill"></text> -->
						<text class="cuIcon-warnfill"></text>
						<text class="sub-text">{{ errMSG }}</text>
					</view>
				</block>
				<view v-if="checkedType == 1" class="modal-btn success-btn" @click="closeModal">确定</view>
				<view v-if="[0, -1].includes(checkedType)" class="modal-btn close-modal" @click="closeModal">关闭</view>
			</view>
		</open-alert>
		
	</view>
</template>

<script>
import getLocation from '../../../utils/get_site.js';

export default {
	data() {
		return {
			rcID: '',
			userInfo: {},
			classInfo: {},
			// 签到按钮类型, 0:可签到  1:已签到  -1:签到失败
			checkedType: 0,
			// errMSG: '您的位置不能签到'
			errMSG: '',
			lat: '',
			lng: ''
		}
	},
	onLoad(option) {
		this.rcID = option.rid;
		this.$u.appLogin(userInfo => {
			
			this.getClassInfo();
			// if(!userInfo.course_teacher_list.length) {
				this.userInfo = userInfo.student;
				this.userInfo = userInfo.student;
				getLocation().then(res => {
					if (res) {
						this.lat = res.latitude;
						this.lng = res.longitude;
						if(this.userInfo&&this.userInfo.student_id){
							this.checkSign();
						}
					}
				});
				
			// }
		});
	},
	onShareAppMessage() {
		// let _title = this.classInfo.add_time.substr(5, 5).replace('-', '/') + ' ' + this.classInfo.title + '点名';
		console.log('pages/rollcall/call-info/call-info?rid=' + this.rcID)
		return {
			title: this.classInfo.add_time.substr(5, 5).replace('-', '/') + ' ' + this.classInfo.title + '点名',
			path: '/pages/rollcall/call-info/call-info?rid=' + this.rcID
		};
	},
	methods: {
		checkedSite() {
			if (!this.lat) {
				getLocation().then(res => {
					if (res) {
						this.lat = res.latitude;
						this.lng = res.longitude;
						this.signIn();
					} else {
						uni.showToast({
							icon: 'none',
							title: '获取位置信息失败'
						});
					}
				});
			} else {
				this.signIn();
			}
		},
		signIn() {
			uni.showLoading({ mask: true });
			this.$u.request({
				url: 'users/rollcall/sign',
				data: {
					rollcall_id: this.rcID,
					student_id: this.userInfo.student_id,
					lat: this.lat,
					lng: this.lng
				},
				success: res => {
					uni.hideLoading();
					if (res.code == 200) {
						this.checkedType = 1;
						// this.getClassInfo();
					} else {
						this.checkedType = -1;
						this.errMSG = res.msg;
					}
					this.openModal();
				}
			})
		},
		checkSign() {
			this.$u.request({
				url: 'users/rollcall/check_sign',
				data: {
					rollcall_id: this.rcID,
					lat: this.lat,
					lng: this.lng
				},
				success: res => {
					if (res.code == 200) {
						let _status = res.result.status;
						if (_status == 1) {
							this.checkedType = 0;
							this.openModal();
						} else if(_status == 0) {
							this.checkedType = -1;
							this.errMSG = res.msg;
							this.openModal();
						}
					}
				},
				fail:()=>{
					
				}
			});
		},
		openModal() {
			this.$refs.checkedModal.Show();
		},
		closeModal() {
			this.$refs.checkedModal.Close();
			if (this.checkedType == 1) {
				this.getClassInfo();
			}
		},
		getClassInfo() {
			this.$u.request({
				url: 'users/rollcall/info',
				method: 'GET',
				data: {
					rollcall_id: this.rcID
				},
				success: res => {
					console.log('签到详情', res);
					if (res.code == 200) {
						this.classInfo = res.result;
					}
				}
			})
		},
		// 分享
		shareCurse() {
			wx.showShareMenu({
				// withShareTicket: true,
				menus: ['shareAppMessage'],
				// success: () => {
				// 	console.log('分享接口调用成功');
				// },
				// fail: err => {
				// 	console.log('分享接口调用失败', err);
				// }
			});
		}
	},
	filters: {
		filterTime(val) {
			return val ? val.substr(5, 5).replace('-', '/') : val;
		}
	}
}
</script>

<style lang="scss" scoped>
.info-page{
	width: 100vw;
	height: 100vh;
}

.course-info{
	width: 100%;
	height: 304rpx;
	background-color: #2B83FF;
	color: #FFFFFF;
	padding: 34rpx;
	position: relative;
	.scholl-logo{
		width: 136rpx;
		height: 136rpx;
	}
	.course-name{
		margin-top: 28rpx;
		font-size: 30rpx;
	}
	.teacher-name{
		margin-top: 16rpx;
		font-size: 24rpx;
	}
	.share-btn{
		height: 58rpx;
		position: absolute;
		top: 30rpx;
		right: 0;
		color: #FFFFFF;
		background-color: rgba(0, 0, 0, 0.1);
		border-radius: 100rpx 0 0 100rpx;
		// padding-top: 10rpx;
		padding-right: 14rpx;
		// padding-bottom: 10rpx;
		padding-left: 22rpx;
		line-height: 58rpx;
		font-size: 24rpx;
		&::after{
			content: none;
			width: 0;
			height: 0;
		}
	}
}

.list-box{
	padding: 60rpx 34rpx 20rpx 34rpx;
	.list-title{
		font-size: 28rpx;
		position: relative;
		padding-left: 20rpx;
		.count-text{
			color: #666666;
		}
		&::before{
			content: '';
			width: 8rpx;
			height: 34rpx;
			position: absolute;
			top: 0;
			left: -8rpx;
			background-color: #43C1FF;
			border-radius: 100px;
		}
	}
	.student-list{
		padding-left: 20rpx;
		.student-item{
			padding-top: 38rpx;
			flex-shrink: 0;
			margin-right: 30rpx;
			.student-avatar{
				width: 102rpx;
				height: 102rpx;
				border-radius: 100%;
			}
			.student-name{
				margin-top: 20rpx;
				text-align: center;
			}
		}
	}
}

.modal-box{
	width: 63vw;
	background-color: #FFFFFF;
	border-radius: 30rpx;
	padding: 50rpx 30rpx;
	box-sizing: border-box;
	.box-circle{
		border-radius: 100%;
		background-color: #4490FF;
		color: #FFFFFF;
		box-shadow: 0 4rpx 14rpx rgba(68, 144, 255, 0.5);
	}
	.can-checked{
		width: 194rpx;
		height: 194rpx;
		.hint{
			font-size: 30rpx;
		}
		.time{
			margin-top: 16rpx;
			font-size: 26rpx;
		}
	}
	.checked-success{
		width: 140rpx;
		height: 140rpx;
		font-size: 76rpx;
	}
	.checked-fail{
		width: 138rpx;
		height: 138rpx;
		color: #FFFFFF;
		background-color: #FF3F3B;
		border-radius: 100%;
		font-size: 68rpx;
	}
	.hint-text{
		margin-top: 32rpx;
		font-size: 30rpx;
	}
	.sub-hint{
		margin-top: 28rpx;
		[class*="cuIcon-"]{
			color: #FEA116;
			font-size: 28rpx;
			margin-right: 12rpx;
		}
		.sub-text{
			font-size: 24rpx;
		}
	}
	.modal-btn{
		width: 204rpx;
		height: 70rpx;
		margin-top: 82rpx;
		text-align: center;
		line-height: 70rpx;
		border-radius: 100rpx;
		font-size: 28rpx;
	}
	.close-modal{
		color: #2C83FF;
		border: 1px solid #2C83FF;
	}
	.success-btn{
		color: #FFFFFF;
		background-color: #2C83FF;
	}
}

.blue-text{
	color: #2C83FF;
}

.red-text{
	color: #FF3F3B;
}

.text-bold{
	font-weight: bold;
}
</style>
